.drawer {
	> .sub-drawer {
		width: 300px;
		height: 100%;
		background-color: var(--fill-color-5);
		display: flow-root;
		> div {
			height: calc(50% - 10px);
			padding: 0 10px;
			display: flex;
			flex-direction: column;
			&:first-child {
				padding-top: 10px;
				padding-bottom: 10px;
				height: calc(50% - 20px);
			}
			> .title {
				font-size: 12px;
				line-height: 24px;
				color: var(--text-color-3);
			}
			> .content {
				flex: 1;
				box-shadow: 0 0 0 1px var(--border-color-3) inset;
				border-radius: 4px;
				overflow: auto;
			}
		}
		/* 层级结构 */
		.hierarchy {
			.content-item {
				background-color: var(--opacity-purity-color-8);
				margin: 6px 6px 0 6px;
				border-radius: 4px;
				&:last-child {
					margin: 6px;
				}
				.root,
				&.root {
					display: flex;
					align-items: center;
					padding: 10px 14px;
					position: relative;
					> .count {
						position: absolute;
						bottom: 0;
						right: 0;
						font-size: 12px;
						line-height: 12px;
						padding: 2px 3px;
						transform: scale(0.8);
						color: var(--text-color-4);
					}
				}
				&.root:hover {
					background-color: var(--opacity-purity-color-14);
				}
				.root > .center,
				.children .children-item {
					display: flex;
					padding: 6px 0;
				}
				&:not(.root) .root:hover {
					background-color: var(--opacity-purity-color-8);
				}
				.children {
					--width: 32px;
					width: calc(100% - (var(--width) + 6px * 2));
					margin-left: var(--width);
					overflow: hidden;
					padding: 6px;
					font-size: 14px;
					.children-item {
						&:hover {
							background-color: var(--opacity-purity-color-8);
						}
						> .center {
							display: flex;
							align-items: center;
						}
					}
				}
			}
			.height-auto {
				height: auto;
			}
		}
	}
}
